<template>
    <div>
        <e-popup :show="show" mode="bottom"  :closeOnClickOverlay="true" @close="close()">
            <view class="content e-p-t-40">
                <scroll-view :scrollY="true" style="min-height: 30vh;max-height: 70vh;">
                    <view class="item card e-m-l-20 p-m-b-20" :class="{on:i==1}" v-for="(item,i) in 3">
                        <text class="label">云炉紫砂壶</text>
                    </view>
                </scroll-view> 
                <view class="bar e-flex-x e-p-20">
                    <view class="e-flex-1">
                        <e-button size="large" type="info" shape="circle" :text="$t('返回')" @click="close()" :throttleTime="1000"></e-button>
                    </view>
                    <view class="e-m-l-20 e-flex-1">
                        <e-button size="large" type="primary" color="#E4423B" shape="circle" :text="$t('确定')" @click="confirm" :throttleTime="1000"></e-button>
                    </view>
                </view>
            </view>
        </e-popup>
    </div>
</template>

<script setup>
import {ref} from 'vue'

const show = ref(false)

const toggle = () =>{
    show.value = !show.value
}

const close = () => {
    show.value = false;
}

const confirm = () => {
    close()
}

defineExpose({toggle})


</script>

<style lang="scss" scoped>

.card {
		background: rgba(255, 255, 255, 1);
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx;
	}
   .item.card {
				margin-left: 0;
				margin-top: 0;
				margin-bottom: 0;
				margin-right: 10rpx;
				padding: 10rpx 30rpx;
				border-radius: 99rpx;
				display: inline-block;

				&.on {
					background: #E4423B;
					color: #fff;
				}
			}

</style>